SkewSlider :: Documentation

Getting Started

1. Including External Files

Add the required files in your page, skw-default.css is the default theme file, is optional and you can include skw-dark.css file instead, or make your own to change the look and feel.

<link rel="stylesheet" href="css/skw-core.css">  <link rel="stylesheet" href="css/skw-default.css">  <script src="js/vendor/modernizr-2.6.2.min.js"></script>  <script src="js/vendor/jquery-1.10.2.min.js"></script>  <script src="js/jquery.skewSlider.js"></script>

2. HTML Structure

The HTML structure is pretty simple, an ul list inside a container div, each li element needs a div inside with a 'skw-content' class, you can add your own classes for styling your content to this div.

3. Initialization

Initialize the slider at the end of the body section. see Options section for slider settings.

4. Images

The easiest way to display images is using the attribute 'data-bg' on the 'skw-content' div, images are automatically scaled and positioned to always fit perfectly. Or you can add your images as html elements and stylling it with css.

5. Captions

To add captions use the attribute 'data-caption' on the 'skw-content' div.

6. Links

if you want to add links to your slides, just wrap the li element with an anchor

Options

Name	Description	Supported types	Default
speed	Duration of the slide animation in miliseconds (ms).	number	1000
easing	CSS3 animation timing function.	string	ease
skew	inclination of the slide in degrees, can be positive or negative	number	-25
width	total width of the slide, only string with percent and number as pixels supported	string, number	"100%"
height	total height of the slide, only string with percent and number as pixels supported	string, number	"100%"
slidePercent	percent width of each slide relative to the slider width	number	75
centered	do you want to center the active slide?	boolean	true
preloadCount	a number representing how many slides you want to preload starting from the first slide, if infinteSlide is activated, also controls the number of cloned items	number	2
moveFx	enable / disable movement efects between slides	boolean	false
delay	delay in miliseconds (ms) between slide animations, requires moveFx	number	300
speedDifference	a number in miliseconds (ms) representing speed difference between slides, requires moveFx	number	150
infiniteSlide	enable / disable the infinite effect cloning the slides	boolean	true
navDots	enable / disable navigation controls	boolean	true
itemPadding	if activated, each slide will have an intelligent padding forming a full visible square area.	boolean	false
moveOnHover	a number in percent relative to the slide representing the distance that items will move toward the center on hover event when is the next or the previous item. set to false to disable	number, boolean	4
hoverSpeed	a number in miliseconds (ms) representing the duration of hover item animation	number	600
clickOnSiblings	enable / disable click event on next and previous items	boolean	true
ratio	defines the aspect ratio of the slide, ignores the height value. set to false if you want to use the height value.	number	40/11
slideshow	set a number in miliseconds (ms) to activate the automatic slideshow, set to false to disable.	number, boolean	8000
breakpoints	and object containing different configuration options for different screen sizes (see responsive features), set to false to disable	javascript object, boolean	false
showCaption	enable / disable captions	boolean	true
setCurrent	defines the current slide starting from 0	number	0
NextPrevDistance	number of positions between current slide and the next / previus slide	number	1
itemsToslide	how many items do you want to move per click	number	1

Responsive Features

you can use the breakpoints option to set different configuration options for different screen sizes, you can set as many breakpoints as you want, to create a new breakpoint, create a new object inside the breakpoints option, give it a name, and set the max width breakpoint using the 'maxWidth' option inside it, for example:

breakpoints: { tablet: { maxWidth : 1024, slidePercent : 45, ratio : 40/13, moveOnHover: 3, moveFx: false, showCaption: false, skew: -15 }, phone: { maxWidth : 600, ratio : 40/20, slidePercent : 65, skew: -12 } }

And thats all, now you can override any option depending on the user viewport width.

CSS Selectors

List of css classes you may want to use for styling or controlling css animations / states

skw-itemActive

applied to the current slide at the beginning of the animation.

skw-animate

applied to the current slide when the animation is over.

skw-itemPrev

applied to the previous slide.

skw-itemNext

applied to the next slide.

Plugin Methods

Update

update the plugin options at any time with animated transitions, the fisrt parameter is the new options object, the second is a callback function, the third is the update animation duration in millisecond (ms), and the last is a boolean value, if true, the plugin stacks the new updates triggered when is bussy animating from cloned items (infiteSlide effect), if false it just ignore them.

// parameters model $('#slide1').skewSlider('update', options object, callback(success), update transition duration, stack ? ); // basic usage - when used without new options, it will restore the original options. $('#slide1').skewSlider('update'); // setting new options with callback function $('#slide1').skewSlider('update', { slidePercent: 75, speed: 1200, moveFx: true }, function(success){ // when animating from cloned items, the plugin stack or ignores new updates // depending on the last parameter, use this parameter to know if the update // was succefully applied if(success){ console.log('update animation end'); } }, 600, true);

Navigate

Navigate to any slide

// parameters model $('#slide1').skewSlider('navigate', item position / direction string ); // moving one position forward $('#slide1').skewSlider('navigate', 'next'); // moving one position backwards $('#slide1').skewSlider('navigate', 'previuos'); // jumping to any position $('#slide1').skewSlider('navigate', 4);

Table of Contents